/**
 * Created by xiao_XX on 2017/8/31.
 * 高级搜索
 */
import React from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Form, Row, Col, Input, Button, Icon,Select ,DatePicker} from 'antd';
import SmartSelect from './SelectAssembly.js';
import SmartTreeSlectInput from './SigleTreeSelect.js';
import styles from './AdvanceSearch.less';
import moment from 'moment';
const FormItem = Form.Item;
const Search = Input.Search;
const Option = Select.Option;

/**
 * 初始化
 * advanceSelect:用处:高级搜索参数 类型:数组Array, 说明:左侧显示搜索名称 *
 * type:namespace的值
 * selec:选择搜索框中的值  传进table中
 */

const WrappedAdvancedSearch = ({type,dispatch,route,advance}) => {


  /**
   * 从上层组件接收的值
   * advanceSelect:铺高级组件的数据
   * selectData:普通选择搜索动态生成option 数据
   * selectValue:普通搜索选择框的值
   * searchValue:普通搜索框的值
   * advanceTails:高级搜索获得的值
   * isAdvance:是否有高级搜索;true false
   * expand:是否展开
   */
  const {advanceSelect,commonSelectData,selectValue,searchValue,advanceTails, isAdvance,expand,query, searchNo} = advance;




  /**
   * 高级搜索展开/闭合按钮
   */
  function toggle(){
    dispatch({
      type: type + route,
      expand:!expand

    });

  }


  function dateSearch(val,date,dateString){


    dispatch({
      type: type + route,
      expand:expand,
      key:val,
      value:dateString

    });

  }



  /**
   * 当搜索框中的值改变的时候尽心遍历  将值传入数组中
   * @param e
   * 将高级搜索框中的值传进state
   */
  function  handleSearch(val,e){

    dispatch({
      type: type + route,
      expand:expand,
      key:val,
      value:e.target.value

    });

  }



  function handleSelect(val,e){

    dispatch({
      type: type + route,
      expand:expand,
      key:val,
      value:e

    });

  }


  /**
   * 重置所有高级搜索框
   */
  function handleReset(){

    dispatch({
      type:type+"/advanceReset",
      payload:{
        expand:expand,
        selectValue:"",
        searchValue:"",
        advanceTails:{}
      }

    })

  }


  /**
   * 选择框
   */
  function handleChange(value){
    dispatch({
      type: type + route,
      expand:expand,
      selectValue:value
    });

  }


  /**
   * 当搜索框的值发生改变的时候
   */
  function searchChange(e){
    dispatch({
      type: type + route,
      expand:expand,
      searchValue:e.target.value
    });

  }


  /**
   * 点击搜索或框内搜索的时候
   * @type {Array}
   */
  function querySearch(){
    dispatch({
      //type: 'personnelAccess/treeClick'
      type:type + query,
      payload: 1,
    });

  }



  const children = [];
  /**
   * 生成form表单
   * @type {Array}
   */

  const count = expand ? 6 : 0;
  const formItemLayout = {
    labelCol: {span: 5},
    wrapperCol: {span: 19}
  };




  for (var i = 0; i < advanceSelect.length; i++) {

    var item = advanceSelect[i];
    var val = item.inputName;

    var value = advanceTails[val];


    switch (item.type) {
      case "Input":
        children.push(
          <Col span={8} key={`Field ${i}`} style={{ display: i < count ? 'block' : 'none' }}>
            <FormItem {...formItemLayout} label={item.name}>
              <Input placeholder={item.name} onChange={handleSearch.bind(this,val)} value = {value} size="default"/>
            </FormItem>
          </Col>
        );
        break;
      case "DatePicker":
        if (value == undefined || value == "") {
          value = undefined
        }else {
          value = moment(value);
        }
        children.push(
          <Col span={8} key={`Field ${i}`} style={{ display: i < count ? 'block' : 'none' }} size="default">
            <FormItem {...formItemLayout} label={item.name}>

              <DatePicker onChange={dateSearch.bind(this,val)} style={{ width: '100%' }} value = {value}/>

            </FormItem>
          </Col>
        );
        break;

      case "TimePicker":
        children.push(
          <Col span={8} key={`Field ${i}`} style={{ display: i < count ? 'block' : 'none' }}>
            <FormItem {...formItemLayout} label={item.name}>

              <TimePicker onChange={handleSearch.bind(this,val)} className={styles.full_width} value = {value}/>

            </FormItem>
          </Col>
        );
        break;

      case "Select":

        //if (defaultValue == undefined) {
        //  defaultValue = "请选择"
        //}

        var opt = [];

        for (let k = 0; k < item.selectData.length; k++) {
          opt.push(
            <Option value={item.selectData[k].value} key={`opt-${i}-${k}`}>{item.selectData[k].text}</Option>
          )
        }


        children.push(
          <Col span={8} key={`select ${i}`} style={{ display: i < count ? 'block' : 'none' }}>
            <FormItem {...formItemLayout} label={item.name}>
              <Select className={styles.full_width} style={{lineHeight: "32px"}} onChange={handleSelect.bind(this,val)} value = {value} size="default">
                {opt}
              </Select>
            </FormItem>
          </Col>
        );
        break;
      default:
        break;
    }

  }



  var option = [];
  if (commonSelectData){
    for (let i = 0;i< commonSelectData.length; i++){
      var opt = commonSelectData[i];
      option.push(
        <Option value = {opt.value} key = {`option${i}`}>
          {opt.text}
        </Option>
      )
    }
  }

  var searchDiv = [];
  if (searchNo){
    searchDiv.push(
      <div key="search-key-no" className={styles.search_div_select}>

      </div>
    )
  } else {
    searchDiv.push(
      <div key="search-key-have">
        <div className={styles.search_select}>
          <Search
            placeholder="请输入关键字"

            onChange={searchChange}

            onSearch={querySearch}

            value={searchValue}

          />
        </div>
        <div className={styles.search_select}>
          <Select size="default" onSelect ={handleChange} value = {selectValue}>
            {option}
          </Select>
        </div>
      </div>
    )
  }

  return (

    <Form>
      <Row style={{width:'90%', top: "-35px", float: "right"}}>
        <Col span={24} style={{ textAlign: 'right' }}>

          <div className={styles.search_select_width} id="div_advance" style={{ display: isAdvance ? 'block' : 'none' }}>

            <Button type="primary" className={styles.advance_select_btn} onClick={querySearch}>搜索</Button>

            <Button className={styles.advance_select_btn} onClick={handleReset} id="reset">
              重置
            </Button>
            <a className={styles.advance_select_a} onClick={toggle} id="advance">
              高级搜索 <Icon type={expand ? 'up' : 'down'}/>
            </a >
          </div>

          {searchDiv}

        </Col>
      </Row>
      <div style={{width:'100%', clear: 'both'}} className={styles.searchs}>
        <Row gutter={16} className = {styles.form_div}>{children}</Row>
      </div>
    </Form>
  );



};

export default connect(({}) => ({}))(WrappedAdvancedSearch);
